
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
#hero {
	width:960px;
	height:500px;
	display:block;
	position:relative;
	margin: 20px auto;
	border:10px solid #FFF;
	border-radius: 7px;
	box-shadow: 0 0 1px 1px #E3E3E3;
	-webkit-box-shadow: 0 0 1px 1px #E3E3E3;
	}
#slider{
	width:960px;
	height:500px;
	display:block;
	position:absolute;
	}
#next{
	background-image: url(2.png);
	background-repeat: no-repeat;
	background-position: right center;
	display: block;
	float: right;
	height: 100%;
	width: 100%;
	position: relative;
	z-index: 99;
	cursor: pointer;
	}
#prev{
	background-image: url(1.png);
	background-repeat: no-repeat;
	background-position: left center;
	display: block;
	float: right;
	height: 100%;
	width: 100%;
	position: relative;
	z-index: 99;
	cursor: pointer;
	}
</style>


</head>
<div id="hero">
<div id="next"></div>
<div id="prev"></div>
<div id="slider">

<div class="slider-items">
<h2 class="caption">Image 1</h2>
<h3 class="desc"><a href="#">Learn more</a></h3>
<img src="3.jpg"/>
</div><!--END SLITER ITEM-->

<div class="slider-items">
<h2 class="caption">Image 2</h2>
<h3 class="desc"><a href="#">Learn more</a></h3>
<img src="4.jpg"/>
</div><!--END SLITER ITEM-->

<div class="slider-items">
<h2 class="caption">Image 3</h2>
<h3 class="desc"><a href="#">Learn more</a></h3>
<img src="5.jpg"/>
</div><!--END SLITER ITEM-->




</div><!--END SLIDER-->





</div><!--END HERo-->
<body>
</body>
</html>
